<script setup>
import useLoginStore from '@/stores/login-store'
import { throttle } from 'lodash-es'
import { Base64 } from 'js-base64'
import { ref, reactive, onMounted } from 'vue'
import router from '@/router'

defineOptions({
  name: 'Login'
})
const loginStore = useLoginStore()

const formData = reactive({
  username: 'admin',
  password: '123456',
  rememberMe: false
})

// const originPwd = ref('')
const rules = {
  username: [
    {
      required: true,
      message: '请输入登录账号',
      trigger: 'blur',
      transform: value => value ? value.replace('\\s*', '') : ''
    }
  ],
  password: [
    {required: true, message: '请输入登录密码', trigger: 'blur'}
  ]
}
const loading = ref(false)

const formRef = ref()

// '记住密码' 保存参数
const setCookie = (cName, value, expiredays = null) => {
  const startDate = new Date()
  startDate.setDate(startDate.getDate() + expiredays)
  document.cookie = `${cName}=${decodeURIComponent(value)}${expiredays == null ? '' : ';expires=' + startDate.toGMTString()}`
}

// 获取cookie 里保存的数据
const getCookie = (key) => {
  if (document.cookie.length) {
    let _start = document.cookie.indexOf(key + '=')
    if (_start > -1) {
      _start = _start + key.length + 1
      // 账号
      let _end = document.cookie.indexOf(';', _start)
      // 密码
      if (_end === -1) _end = document.cookie.length
      return unescape(document.cookie.substring(_start, _end))
    }
  }
  return ''
}

// 保存密码
const setUserCookie = () => {
  if (formData.rememberMe) {
    setCookie('nzOAAccount', formData.username)
    let _password = Base64.encode(formData.password)
    setCookie('nzOAPwd', _password)
  } else {
    setCookie('nzOAAccount', '')
    setCookie('nzOAPwd', '')
  }
}

// 登录请求
const handleLogin = throttle(() => {
  formRef.value.validate(async valid => {
    if ( !valid) return false
    loading.value = true
    loginStore.handleLogin(formData).then(() => {
      router.push('/').then()
      setUserCookie()
    }).catch(err => {
      return err
    }).finally(() => {
      loading.value = false
    })
  })
}, 250)

onMounted(() => {
  const _username = getCookie('nzOAAccount')
  let _pwd = getCookie('nzOAPwd')
  if (_username) {
    _pwd = Base64.decode(_pwd)
    formData.username = _username
    formData.password = _pwd
    formData.rememberMe = true
  }
})
</script>
<template>
  <div class="login">
    <ElForm ref="formRef" v-loading="loading" :rules="rules" :model="formData" class="login-form">
      <h1 class="login-title font-center">欢迎登录后台管理系统</h1>
      <ElFormItem prop="username">
        <ElInput size="large" v-model.trim="formData.username">
          <template #prepend>
            用户名
          </template>
        </ElInput>
      </ElFormItem>
      <ElFormItem prop="password" style="margin-bottom: 0;">
        <ElInput size="large" v-model.trim="formData.password" type="password" show-password @keyup.enter="handleLogin">
          <template #prepend>
            密 码
          </template>
        </ElInput>
      </ElFormItem>
      <div>
        <ElCheckbox class="remember-me" v-model="formData.rememberMe">记住密码</ElCheckbox>
      </div>
      <ElButton class="login-button" size="large" type="primary" @click="handleLogin">登 录
      </ElButton>
      <div> admin/123456</div>
    </ElForm>
  </div>
</template>

<style lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f3f5fb;

  .login-form {
    --fz: 33px;
    @include flex-column;
    margin: 10vh auto;
    justify-content: center;
    width: 540px;
    min-height: 500px;
    padding: 3vh 7vh;
    border-radius: 40px;
    box-sizing: border-box;
    background: #fff;
    backdrop-filter: blur(80px);
    box-shadow: 0 3px 8px 4px rgba(153, 175, 255, .3);

    .login-title {
      margin-bottom: 3rem;
      color: #2b4173;
    }

    .login-button {
      width: 100%;
      height: 56px;
      font-size: 24px;
      background-color: var(--color-primary);
      margin-top: 2.4vh;
      margin-bottom: 2.4vh;
      border-radius: 10px;

      &:hover {
        background-color: var(--el-color-primary-light-3);
      }
    }

    .el-form-item__content {
      height: 50px;
    }

    .el-form-item {
      height: calc(50px + 2vh);
      border-radius: 10px;

      .el-form-item__error {
        margin-top: 3px;
        text-indent: 80px;
      }
    }

    .el-input-group__prepend {
      color: var(--color-primary);
      background: #fff;
      box-shadow: 0 0 0 1px #99AFFF inset;
      border-radius: 10px 0 0 10px;
    }

    .el-input__wrapper {
      background: #fff;
      box-shadow: 0 0 0 1px #99AFFF inset;
      border-radius: 0 10px 10px 0;
    }

    .el-input {
      height: 50px;

      .el-input__inner {
        color: var(--color-primary);
        font-size: 16px;
      }

      .el-input__icon {
        color: var(--color-primary);
        font-size: 18px;
      }
    }
  }

  .remember-me {
    margin-left: 20px;

    .el-checkbox__label {
      margin-top: 3px;
      color: var(--color-primary);

      &:hover {
        text-decoration: underline;
      }
    }
  }

}
</style>
